<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <div class="nav-menu">
          <ul class="menu-wrap">
            <li v-for="(item, index) in category" :key="index" class="menu-item">
              <a href="javascript:;">{{item.cat_name}}</a>
              <div class="children">
                <ul>
                  <li v-for="(g, k) in item.goods" :key="k">
                    <a :href="'/#/product/' + g.sku_id">
                      <img v-lazy="g.image" :alt="g.title">
                      {{g.title}}
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <swiper :options="swiperOption" ref="swiperOption">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in slideList" :key="index">
            <a :href="'/#/product/' + item.sku_id">
              <img :src="item.image" :alt="item.title">
            </a>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <div class="ads-box">
        <div class="ad-left">
          <div class="ad-item ms">
            <a href="">
              <img src="/imgs/ads/icon/icon-3.png" alt="">
              <p>小米秒杀</p>
            </a>
          </div>
          <div class="ad-item tg">
            <a href="">
              <img src="/imgs/ads/icon/icon-4.png" alt="">
              <p>企业团购</p>
            </a>
          </div>
          <div class="ad-item fm">
            <a href="">
              <img src="/imgs/ads/icon/icon-5.png" alt="">
              <p>F码通道</p>
            </a>
          </div>
          <div class="ad-item mk">
            <a href="">
              <img src="/imgs/ads/icon/icon-2.png" alt="">
              <p>米粉卡</p>
            </a>
          </div>
          <div class="ad-item huan">
            <a href="">
              <img src="/imgs/ads/icon/icon-6.png" alt="">
              <p>以旧换新</p>
            </a>
          </div>
          <div class="ad-item hf">
            <a href="">
              <img src="/imgs/ads/icon/icon-1.png" alt="">
              <p>话费充值</p>
            </a>
          </div>

        </div>
        <div class="ad-right">
          <a :href="'/#/product/' + item.id" v-for="(item, index) in adsList" :key="index">
            <img v-lazy="item.img" alt="">
          </a>
        </div>
      </div>

    </div>
    <div class="product-box">
      <div class="container">
        <div class="banner">
            <a href="/#/product/39">
              <img src="/imgs/banner-1.png" alt="">
            </a>
        </div>
        <div class="list phones">
          <div class="product-top">
            <h2 class="title">手机</h2>
            <div class="more">
              <a href="">查看全部<span>></span></a>
            </div>

          </div>
          <div class="wrapper">
            <div class="banner-left">
              <a href="/#/product/34">
                <img src="/imgs/mix-alpha.jpg" alt="">
              </a>
            </div>
            <div class="list-box">
              <ul>
                <li class="item" v-for="(item, index) in phoneList.slice(0,8)" :key="index">
                  <a :href="'/#/product/' + item.sku_id">
                    <div class="item-img">
                      <img v-lazy="item.image" alt="">
                    </div>
                    <div class="item-info">
                      <h3>{{item.title}}</h3>
                      <p class="content">{{item.promotion_title}}</p>
                      <p class="price">{{item.price}}元起</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="banner">
          <a href="/#/product/39">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1520&h=149&f=webp&q=90" alt="">
          </a>
        </div>
        <div class="list jiadian">
          <div class="product-top">
            <h2 class="title">家电</h2>
            <div class="more">
              <span>热门</span>
              <span>电视影音</span>
            </div>

          </div>
          <div class="wrapper">
            <div class="banner-left">
              <a href="javascript:;" @click="toCart">
                <img src="/imgs/mix-alpha.jpg" alt="">
              </a>
            </div>
            <div class="list-box">
              <ul>
                <li class="item" v-for="(item, index) in jiadianList.slice(0,7)" :key="index">
                  <a :href="'/#/product/' + item.sku_id">
                    <div class="item-img">
                      <img v-lazy="item.image" alt="">
                    </div>
                    <div class="item-info">
                      <h3>{{item.title}}</h3>
                      <p class="content">{{item.promotion_title}}</p>
                      <p class="price">{{item.price}}元起</p>
                    </div>
                  </a>
                </li>
                <li class="item item-last" v-for="(item) in jiadianList.slice(7,8)" :key="item.id">
                  <a :href="'/#/product/' + item.sku_id" >
                    <div class="product-last top">
                        <div class="item-info" style="margin-left: 15px">
                          <h3>{{item.title}}</h3>
                          <p class="price">{{item.price}}元起</p>
                        </div>
                        <div class="item-img" style="margin-right: 10px">
                          <img v-lazy="item.image" alt="">
                        </div>
                    </div>
                  </a>
                  <a href="" >
                    <div class="product-last more">
                      <div class="item-info">
                        <span class="more-text">浏览更多</span>
                        <span class="hot">热门</span>
                      </div>
                      <div class="item-img">
                        <img src="/imgs/r.png" alt="">
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <service-bar></service-bar>
    <modal title="这是标题" btn-type="3" sure-text="查看" modal-type="middle" :show-modal="showModal" v-on:closeModal="showModal=false">
      <template v-slot:body>
        <p>商品添加成功</p>
      </template>
    </modal>
  </div>
</template>
<script>
  import ServiceBar from './../components/ServiceBar';
  import Modal from './../components/Modal';
  //轮播插件
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css';
  export default{
    name:'index',
    components: {
      swiper,
      swiperSlide,
      ServiceBar,
      Modal
    },
    data() {
      return {
        slideList: [],
        swiperOption:{
          autoplay:true,
          loop:false,
          effect:'cube',
          cubeEffect: {
            shadowOffset: 100,
            shadowScale: 0.6
          },
          pagination: {
            el: '.swiper-pagination',
            clickable:true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        },
        category: [],
        adsList: [
          {
            id: 30,
            img: '/imgs/ads/ads-1.png',
            title: '小米手机测试一小米手机测试一小米手机测试一'
          },
          {
            id: 30,
            img: '/imgs/ads/ads-2.jpg',
            title: '小米手机测试'
          },
          {
            id: 30,
            img: '/imgs/ads/ads-3.png',
            title: '小米手机测试'
          },
        ],
        phoneList: [],
        jiadianList: [],
        showModal: false,
      }
    },
    mounted() {
      //获取轮播
      this.http.get('api/getRotationChart').then((res)=> {
        this.slideList = res.result
      })
      //获取分类
      this.http.get('api/category/list').then((res)=> {
        this.category = res.result
      })
      //手机分类下的商品
      this.http.get('api/category/goods',{category_id:11, limit:8}).then((res)=> {
        this.phoneList = res.result
      })
      //手机分类下的商品
      this.http.get('api/category/goods',{category_id:15, limit:8}).then((res)=> {
        this.jiadianList = res.result
      })
        //this.init();
    },
    methods: {
      init() {
            //获取手机列表
            this.axios.get('/products', {
                params: {
                    categoryId: 100012,
                    pageSize: 8
                }
            }).then((res)=> {
                this.phoneList = res.list
            })
            //获取手机列表
            this.axios.get('/products', {
                params: {
                    categoryId: 100012,
                    pageSize: 8
                }
            }).then((res)=> {
              this.jiadianList = res.list
            })
        },
      toCart() {
        this.showModal = true
      },
      closeModal() {
        alert(111)
      }
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/mixin.scss';
  @import './../assets/scss/base.scss';
  .index {
    .swiper-box {
      .nav-menu {
        position: absolute;
        z-index: 9;
        width: 264px;
        height: 451px;
        background-color: #55585a7a;
        box-sizing: border-box;
        padding: 10px 0;
        .menu-wrap {
          .menu-item {
            height: 42.5px;
            line-height: 42.5px;
            a {
              display: block;
              position: relative;
              color: #ffffff;
              font-size: 16px;
              padding-left: 30px;
              &:after {
                content: ' ';
                position: absolute;
                right: 30px;
                top: 17.5px;
                @include bgImg(10px, 15px, '/imgs/icon-arrow.png');
              }

            }

            &:hover {
              background: #FF6600;
              .children {
                display: flex;
              }
            }
            .children {
              height: 451px;
              background-color: #ffffff;
              position: absolute;
              left: 264px;
              top: 0;
              border: 1px solid #E5E5E5;
              display: none;
              padding-right: 25px;
              ul {
                height: 451px;
                width: 234px;
                overflow: hidden;
                li {
                  height: 75px;
                  line-height: 75px;
                  width: 210px;
                  padding-left: 23px;
                }
                a {
                  color: #333333;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                }
                img {
                  width: 42px;
                  height: 35px;
                  vertical-align: middle;
                  margin-right: 15px;
                }
              }
            }
          }

        }
      }
      .swiper-container {
        height: 451px;
        img {
          width: 100%;
          height: 100%;
        }
        .swiper-button-prev {
          margin-left: 274px;
        }
      }
    }
    .ads-box {
      display: flex;
      margin-top: 14px;
      margin-bottom: 31px;
      .ad-left {
        width: 296px;
        margin-right: 20px;
        display: flex;
        flex-wrap: wrap;
        background-color: #665e57;
        .ad-item {
          box-sizing:border-box;
          width: 98px;
          height: 82px;
          //padding: 10px;
        }
        a {
          display: block;
          color: #ffffff;
          opacity: .7;
          text-align: center;
          padding: 18px 0 0;
          img {
            width: 24px;
            height: 24px;
          }
          p {
            margin-top: 5px;
          }
          &:hover {
            opacity: 1;
          }
        }
        .ms {
          border-right: 1px solid #B0B0B0;
          border-bottom: 1px solid #B0B0B0;
        }
        .tg {
          border-right: 1px solid #B0B0B0;
          border-bottom: 1px solid #B0B0B0;
        }
        .fm {
          border-bottom: 1px solid #B0B0B0;
        }
        .mk {
          border-right: 1px solid #B0B0B0;
        }
        .huan {
          border-right: 1px solid #B0B0B0;
        }
        .hf {
        }
      }
      .ad-right {
        flex: 1;
        @include flex();
        a {
          width: 296px;
          height: 167px;
          &:hover {
            box-shadow:0px 7px 6px 0px rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    .product-box {
      .banner {
        a {
          display: block;
          img {
            width: 100%;
            height: 130px;
          }
        }
      }
      background-color: #F5F5F5;
      width: auto !important;
      .list {
        margin-bottom: 20px;
        .product-top {
          height: 58px;
          line-height: 58px;
          display: flex;
          justify-content: space-between;
          .title {
            margin: 0;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #333;
          }
          .more {
            font-size: 14px;
            color: #333333;
          }
        }
        .wrapper {
          height: 616px;
          display: flex;
          .banner-left {
            margin-right: 16px;
            img {
              width: 224px;
              height: 616px;
              &:hover {
                box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.05);
                margin-top: -5px;
              }
            }
          }
          .list-box {
            ul {
              width: 986px;
              display: inline-grid;
              grid-template-columns: 24% 24% 24% 24%;
              grid-template-rows: 302px 302px;
              column-gap: 13.1px;
              row-gap: 13.1px;
              li {
                background-color: #ffffff;
                text-align: center;
                a {
                  display: block;
                  height: 302px;
                  .item-img {
                    img {
                      width: 160px;
                      height: 160px;
                      margin: 18px auto 18px;
                    }
                  }
                  .item-info {
                    h3 {
                      font-size: 14px;
                      line-height: 14px;
                      color: #333333;
                      margin: 0 10px 2px;
                      font-weight: bold;
                    }
                    p {
                      height: 18px;
                      color: #999999;
                      margin: 6px auto 13px auto;
                    }
                    .content {
                      width: 150px;
                      overflow: hidden;
                    }
                    .price {
                      color: #F20A0A;
                      font-size: 14px;
                      margin: 0 10px 14px;
                      font-weight: bold;
                    }
                  }
                }
                &:hover {
                  box-shadow: 0 7px 6px 0 rgba(0, 0, 0, 0.05);
                  margin-top: -5px;
                }
              }
              .item-last {
                background-color: #F5F5F5;
                &:hover {
                  box-shadow: 0 0 0 0 ;
                  margin-top: 0;
                }
                a {
                  height: 144px;
                  .product-last {
                    background-color: #ffffff;
                    height: 144px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: left;
                    .item-info {
                      h3 {
                        font-size: 14px;
                        font-weight: 200;
                      }
                      .price {
                        margin-top: 20px;
                        font-size: 14px;
                        font-weight: 200;
                      }
                    }
                    .item-img {

                    }
                    img {
                      width: 80px;
                      height: 80px;
                    }
                  }
                  .top {
                    &:hover {
                      box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.05);
                      .item-info {
                        margin-top: -5px;
                      }
                      .item-img {
                        margin-top: -5px;
                      }
                    }
                  }
                  .more {
                    margin-top: 15px;
                    padding-left: 40px;
                    &:hover {
                      box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.05);
                      margin-top: 10px;
                    }
                    .more-text {
                      display: block;
                      font-size: 16px;
                      font-weight: bold;
                    }
                    .item-img {
                      width: 80px;
                      img {
                        margin-top: 20px;
                        width: 50px;
                        height: 50px;
                      }
                    }
                  }

                }

              }
            }

          }
        }
      }
    }
  }

</style>